<template>
  <!-- <div
    class="address-management"
    :class="addressList.length < 1 && page > 1 ? 'on' : ''"
    ref="container"
  >
    <div class="line" v-if="addressList.length > 0">
      <img src="@assets/images/line.jpg" />
    </div>
    <div class="item" v-for="(item, index) in addressList" :key="index">
      <div class="address">
        <div class="consignee">
          收货人：{{ item.real_name
          }}<span class="phone">{{ item.phone }}</span>
        </div>
        <div>
          收货地址：{{ item.province }}{{ item.city }}{{ item.district
          }}{{ item.detail }}
        </div>
      </div>
      <div class="operation acea-row row-between-wrapper">
        <div class="select-btn">
          <div class="checkbox-wrapper">
            <label class="well-check"
              ><input
                type="radio"
                name="default"
                value=""
                :checked="item.is_default ? true : false"
                @click="radioChange(index)"
              /><i class="icon"></i><span class="default">设为默认</span></label
            >
          </div>
        </div>
        <div class="acea-row row-middle">
          <div @click="editAddress(index)">
            <span class="iconfont icon-bianji"></span>编辑
          </div>
          <div @click="delAddress(index)">
            <span class="iconfont icon-shanchu"></span>删除
          </div>
        </div>
      </div>
    </div>
    <Loading :loaded="loadend" :loading="loading"></Loading>
    <div class="noCommodity" v-if="addressList.length < 1 && page > 1">
      <div class="noPictrue">
        <img src="@assets/images/noAddress.png" class="image" />
      </div>
    </div>
    <div style="height:1.2rem;"></div>
    <div class="footer acea-row row-between-wrapper">
      <div class="addressBnt bg-color-red" v-if="isWechat" @click="addAddress">
        <span class="iconfont icon-tianjiadizhi"></span>添加新地址
      </div>
      <div class="addressBnt on bg-color-red" v-else @click="addAddress">
        <span class="iconfont icon-tianjiadizhi"></span>添加新地址
      </div>
      <div class="addressBnt wxbnt" v-if="isWechat" @click="getAddress">
        <span class="iconfont icon-weixin2"></span>导入微信地址
      </div>
    </div>
  </div> -->

  <el-container>
      <el-header height="172px" style="padding:0 0;">
          <HomeNavigation></HomeNavigation>
          <SearchBox></SearchBox>
          <ClassNavigation></ClassNavigation>
      </el-header>
      <el-container class="address-management">
        <el-container style="width:1090px;margin:20px auto 0;">
            <el-aside width="180px">
                <div class="side">
                  <el-menu
                  default-active="1-3 "
                  active-text-color="#b4a078"
                  @open="handleOpen"
                  @close="handleClose">
                    <el-menu-item-group>
                      <p slot="title" class="sideTitle">我的服务</p>
                      <el-menu-item index="1-1">
                         <router-link to="/user">
                          <p class="sideIetm">个人中心</p>
                        </router-link>
                        </el-menu-item>
                      <el-menu-item index="1-2">
                        <router-link to="/user/vip">
                          <p class="sideIetm">会员中心</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="1-3">
                        <router-link to="/user/add_manage">
                          <p class="sideIetm">地址信息</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="1-4">
                        <router-link to="/collection">
                        <p class="sideIetm">我的收藏</p>
                        </router-link>
                        </el-menu-item>
                      <el-menu-item index="1-5">
                          <router-link to="/user/user_coupon">
                            <p class="sideIetm">优惠券</p>
                          </router-link>
                      </el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                      <p slot="title" class="sideTitle">订单管理</p>
                      <el-menu-item index="2-1">
                        <router-link to="/order/list/0">
                          <p class="sideIetm">我的订单</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="2-2"><router-link to="/order/refund_list"> 
                        <p class="sideIetm">售后/退款</p>
                      </router-link></el-menu-item>
                    </el-menu-item-group>
                </el-menu>
              </div>
            </el-aside>
          <el-main style="padding: 20px 0 20px 20px;">
            <div class="main">
              <div class="acea-row row-between">
                <div class="title">已保存收货地址</div>
                <div class="add"  @click="addAddress">+新建地址</div>
              </div>
              <div class="address"  v-for="(item, index) in addressList" :key="index">
                <div class="a-tt acea-row">
                  <div class="item-1">收货人</div>
                  <div class="item-2">地址</div>
                  <div class="item-3">联系方式</div>
                  <div class="item-4">操作</div>
                  <div class="item-5"></div>
                </div>
                <div class="a-td acea-row">
                    <div class="item-1">{{ item.real_name}}</div>
                    <div class="item-2">{{ item.province }}{{ item.city }}{{ item.district}}{{ item.detail }}</div>
                    <div class="item-3">{{ item.phone }}</div>
                    <div class="item-4  acea-row row-center-wrapper">
                      <div class="i-link" @click="editAddress(index)">编辑</div>
                      <div class="i-link" @click="delAddress(index)">删除</div>
                    </div>
                    <div class="item-5" @click="radioChange(index)">设为默认</div>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
        <el-footer style="padding: 0;">
          <Foot></Foot>

        </el-footer>
      </el-container>
    </el-container>

</template>
<style scoped>
.address-management {
  background-color: #fff;
}
.address-management .side {
    border: 1px solid #eaeaea;
    height:510px;
    padding-top: 24px;
    margin-top: 20px;
  }
  .address-management .side .sideTitle {
    font-size: 16px;
    color: #333;
    font-weight: 700;
    padding-left: 23px;
  }

  .address-management .side .sideIetm {
    font-size: 14px;
    padding-left: 23px;
  }
  .address-management  .main {
    width: 890px;
  }
  .address-management  .main .title {
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
    width: 120px;
  }
  .address-management  .main .add {
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #69c;
    cursor: pointer;
    font-size: 14px;
    width: 100px;
  }
  .address-management  .main .address {
    width: 890px;
    height: 144px;
    margin: 20px 0;
    border: 1px solid #eaeaea;
    margin-bottom: 20px;
  }
  .address-management  .main .address .a-tt {
    height: 43px;
    text-align: center;
    font-weight: 400;
    line-height: 42px;
    color: #999;
    border-bottom: 1px solid #e8e8e8;
    background-color: #f4f4f4;
  }
  .address-management  .main .address .a-tt .item-1{
    width: 119px;
  }
  .address-management  .main .address .a-tt .item-2{
    width: 320px;
  }
  .address-management  .main .address .a-tt .item-3{
    width: 170px;
  }
  .address-management  .main .address .a-tt .item-4{
    width: 140px;
  }
  .address-management  .main .address .a-tt .item-5{
    width: 139px;
  }
  .address-management  .main .address .a-td {
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
  }
  .address-management  .main .address .a-td .item-1{
    width: 119px;
  }
  .address-management  .main .address .a-td .item-2{
    width: 320px;
  }
  .address-management  .main .address .a-td .item-3{
    width: 170px;
  }
  .address-management  .main .address .a-td .item-4{
    width: 140px;
  }
  .address-management  .main .address .a-td .item-4 .i-link {
    color: #69c;
    cursor: pointer;
    width: 40px;
  }
  .address-management  .main .address .a-td .item-5{
    width: 139px;
    color: #69c;
    cursor: pointer;
  }
</style>
<script type="text/babel">
import {
  getAddressList,
  getAddressRemove,
  getAddressDefaultSet,
  postAddress
} from "@api/user";
import Loading from "@components/Loading";
import { isWeixin } from "@utils";
import { openAddress } from "@libs/wechat";
import HomeNavigation from "@components/HomeNavigation";
import ClassNavigation from "@components/ClassNavigation";
import SearchBox from "@components/SearchBox";
import Foot from "@components/Foot";

export default {
  components: {
    Loading,
    HomeNavigation,
    ClassNavigation,
    SearchBox,
    Foot
  },
  data() {
    return {
      page: 1,
      limit: 20,
      addressList: [],
      loadTitle: "",
      loading: false,
      loadend: false,
      isWechat: isWeixin()
    };
  },
  mounted: function() {
    this.AddressList();
    this.$scroll(this.$refs.container, () => {
      !this.loading && this.AddressList();
    });
  },
  methods: {
    /**
     * 获取地址列表
     *
     */
    AddressList: function() {
      let that = this;
      if (that.loading) return; //阻止下次请求（false可以进行请求）；
      if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
      that.loading = true;
      getAddressList({ page: that.page, limit: that.limit }).then(res => {
        that.loading = false;
        //apply();js将一个数组插入另一个数组;
        that.addressList.push.apply(that.addressList, res.data);
        that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
        that.page = that.page + 1;
      });
    },
    /**
     * 编辑地址
     */
    editAddress: function(index) {
      this.$router.push({
        path: "/user/add_address/" + this.addressList[index].id
      });
    },
    /**
     * 删除地址
     */
    delAddress: function(index) {
      let that = this;  
      let address = this.addressList[index];
      let id = address.id;
      getAddressRemove(id).then(function() {
        that.$dialog.toast({
          mes: "删除成功!",
          callback: () => {
            that.addressList.splice(index, 1);
            that.$set(that, "addressList", that.addressList);
          }
        });
      });
    },
    /**
     * 设置默认地址
     */
    radioChange: function(index) {
      let that = this,
        address = this.addressList[index],
        id = address.id;
      getAddressDefaultSet(id).then(function() {
        for (var i = 0, len = that.addressList.length; i < len; i++) {
          if (i === index) that.addressList[i].is_default = 1;
          else that.addressList[i].is_default = 0;
        }
        that.$set(that, "addressList", that.addressList);
      });
    },
    /**
     * 新增地址
     */
    addAddress: function() {
      this.$router.push({
        path: "/user/add_address"
      });
    },
    getAddress() {
      openAddress().then(userInfo => {
        this.$dialog.loading.open();
        postAddress({
          real_name: userInfo.userName,
          phone: userInfo.telNumber,
          address: {
            province: userInfo.provinceName,
            city: userInfo.cityName,
            district: userInfo.countryName
          },
          detail: userInfo.detailInfo,
          post_code: userInfo.postalCode,
          wx_export: 1
        })
          .then(() => {
            this.page = 1;
            this.loading = false;
            this.loadend = false;
            this.addressList = [];
            this.AddressList();

            this.$dialog.loading.close();
            this.$dialog.toast({ mes: "添加成功" });
          })
          .catch(err => {
            this.$dialog.loading.close();
            this.$dialog.error(err.msg || "添加失败");
          });
      });
    }
  }
};
</script>
